<template>
  <view class="home-relession home-panel">
    <view class="panel-header">
      <text class="panel-header--title">推荐课程</text>
    </view>
    <view class="panel-content">
      <view class="relession-swipe--container">
        <view class="relession-swipe-item">
          <uiGrid :columnNum="2" :gutter="30" class="relession-swipe-item--container">
            <uiGridItem boxClass="relession-lession--container" v-for="item in list" :key="item.id">
              <template v-slot:content>
                <lessionItem
                  :lessonId="item.lessonId"
                  :lessonName="item.lessonName"
                  :lessonPicPath="item.lessonPicPath"
                  :publishTime="item.publishTime"
                  :lessonPrice="item.lessonPrice"
                  :isVipLesson="item.isVipLesson"
                  :lessonCheapPrice="item.lessonCheapPrice"
                  :clickNum="item.clickNum"
                ></lessionItem>
              </template>
            </uiGridItem>
          </uiGrid>
        </view>
      </view>

      <view class="panel-footer">
        <div class="panel-footer--box">
          <view class="panel-footer--btn" @click="handleClickGotoLession">查看更多课程</view>
          <view
            class="panel-footer--btn lookMoreTip ui-flex flex--vcenter"
            @click="handleClickReload"
          >
            <image class="panel-footer--btn-image" src="/static/images/home/huanyipi.png" alt />
            <text>换一批</text>
          </view>
        </div>
      </view>
    </view>
  </view>
</template>

<script>
import uiGrid from "@/components/base/grid/index.vue";
import uiGridItem from "@/components/base/grid-item/index.vue";
import lessionItem from "@/components/business/lession/lession.vue";

import { selectLessonByName } from "api/order/lession.js";
export default {
  name: "homeRelession",
  components: {
    uiGrid,
    uiGridItem,
    lessionItem
  },
  "mp-weixin": {
    options: {
      multipleSlots: true, // 在组件定义时的选项中启用多slot支持
      styleIsolation: "shared" //  这个选项等价于设置 styleIsolation: apply-shared ，但设置了 styleIsolation 选项后这个选项会失效。
    }
  },
  data() {
    return {
      list: [],
      page: {
        currentPage: 1,
        pageNumber: 6,
        totalNumber: 0,
        totalPage: 1
      }
    };
  },
  created() {
    this.loadRecommended();
  },
  mounted() {},
  methods: {
    handleClickGotoLession() {
      this.$router.push({
        path: `/lession`,
        query: {
          sid: this.$route.query.sid
        }
      });
    },
    handleClickGotoLessionDetail(lessonId) {
      this.$router.push({
        path: `/lession/detail`,
        query: {
          id: `${lessonId}`,
          sid: this.$route.query.sid
        }
      });
    },
    // 重新加载一批数据
    handleClickReload() {
      // 处理当前页 如果小于最大页数则增加 否则变成第一页
      if (this.page.currentPage >= this.page.totalPage) {
        this.page.currentPage = 1;
      } else {
        this.page.currentPage++;
      }
      this.loadRecommended();
    },
    // 加载推荐的课程
    loadRecommended() {
      var params = {
        page: this.page,
        mainlyFlag: "Y"
      };
      var self = this;
      selectLessonByName(params).then(({ respCode, respMsg, result }) => {
        if (respCode !== "0") {
          // 加载失败
          this.isloading = false;
          this.$toast.fail(respMsg);
          return;
        }
        self.list = result.list.slice(0, 6);
        this.page.totalPage = result.page.totalPage;
      });
    }
  }
};
</script>

<style scoped lang="scss">
/deep/ .relession-lession--container {
  margin-bottom: 36upx;
}
</style>
